import React, {PureComponent} from 'react';
import {Form, Input, Modal, Select, Steps,} from 'antd';
import DescriptionList from '@/components/DescriptionList';
import {nameMaxLength, remarkMaxLength} from '@/utils/rule'

const {Description} = DescriptionList;
const FormItem = Form.Item;
const {Step} = Steps;
const {TextArea} = Input;
const {Option} = Select;
const SelectOption = Select.Option;

/**
 * 共享文件申请下载页面
 */
@Form.create()
class SimpleDownloadApplyCreateForm extends PureComponent {

  constructor(props) {
    super(props);
    this.formLayout = {
      labelCol: {span: 5},
      wrapperCol: {span: 18},
    };
  }


  render() {
    const {modalVisible, form, addDownloadApply, handleModalVisible, records, orgAdmin,onAuditUser,} = this.props;

    const okHandle = () => {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        form.resetFields();
        addDownloadApply(records, fieldsValue);
      });
    };
    const fileNames = records.map((item) => {
      console.error("item.dirName:"+item.dirName);
      return item.dirName;
    }).join(",");
    let auditUsers = [];
    if (orgAdmin) {
      orgAdmin.forEach(item => {
        auditUsers.push(<Option key={item.userCode}>{item.userName}</Option>);
      });
    }


    return (
      <Modal
        width={640}
        bodyStyle={{padding: '32px 40px 48px'}}
        destroyOnClose
        title="下载申请"
        visible={modalVisible}
        onOk={okHandle}
        onCancel={() => handleModalVisible()}
        afterClose={() => handleModalVisible()}
        maskClosable={false}
      >

        <FormItem key="fileName" {...this.formLayout} label="文件名称">
          {fileNames}
        </FormItem>
        <FormItem key="name" {...this.formLayout} label="下载事项">
          {form.getFieldDecorator('applyTitle', {
            rules: [{required: true, message: '请输入下载事项！'}, {max: nameMaxLength()[0], message: nameMaxLength()[1]}],
          })(<Input placeholder="请输入"/>)}
        </FormItem>
        <FormItem key="desc" {...this.formLayout} label="下载理由">
          {form.getFieldDecorator('applyReason', {
            rules: [{required: true, message: '请输入至少五个字符的下载理由！', min: 5}, {
              max: remarkMaxLength()[0],
              message: remarkMaxLength()[1]
            }],
          })(<TextArea rows={4} placeholder="请输入至少五个字符"/>)}
        </FormItem>
        {onAuditUser?null:<FormItem label="选择审批人" {...this.formLayout}>
          {form.getFieldDecorator('auditUserCode', {
            rules: [{required: true, message: '请选择审批人',},],
          })(
            <Select
              style={{width: '100%'}}
              placeholder="选择审批人"
            >
              {auditUsers}
            </Select>
          )}
        </FormItem>}

      </Modal>
    );
  }
}

export default SimpleDownloadApplyCreateForm;
